<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script charset="utf-8" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/com.wxd.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/pageview.js"></script>
    <title>b</title>
    <link rel="stylesheet" type="text/css" href="/style/com.wxd.css"/>
    <link rel="stylesheet" type="text/css" href="/style/table.css"/>
    <style>
        .box {display: flex;flex-direction: column;}

        .root_box_top {height: 120px;}

        .root_box_center {flex: 1;}

        .root_box_bottom {height: 38px;}

        .root_box_bottom label {padding-left: 5px;padding-right: 5px;}

        .alertBoxBg .alertBox li {height: 23px;line-height: 20px;}

        .alertBoxBg .alertBox label {padding-left: 5px;padding-right: 5px;text-align: right;width: 80px;display: inline-block;}

        .alertBoxBg .alertBox input {width: 180px;border: #8c8c8c 1px solid;}
    </style>
    <script>

        let pageView = null;

        function search() {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("minTime", $("#minTime").val());
            urlQuery.put("maxTime", $("#maxTime").val());
            urlQuery.put("where", $("#labWhere").text());
            urlQuery.put("order", $("#labOrderBy").text());
            pageView.remoteGetData(urlQuery);
        }

        // 用于显示的格式化版本
        function formatForDisplay(str) {
            if (typeof str === "string") {
                return str;
            }
            return JSON.stringify(str, null, 2); // 会保留换行和缩进
        }

        function formatJsonWithNewlines(obj) {
            if (typeof obj === 'string') {
                try {
                    obj = JSON.parse(obj);
                } catch (e) {
                    // 如果解析失败，直接格式化字符串
                    return obj;
                }
            }
            // 使用2个空格进行缩进，自动包含换行符
            return JSON.stringify(obj, null, 2);
        }

        function escapeJSString(str) {
            return formatForDisplay(str).replace(/\\/g, "\\\\")
                .replace(/'/g, "\\'")
                .replace(/"/g, "\\\"")
                .replace(/\n/g, "\\n")
                .replace(/\r/g, "\\r")
                .replace(/\t/g, "\\t");
        }

        function createRow(number, row, index) {
            // language=HTML
            let tr = `
                <tr>
                    <td>${number}</td>
                    <td style="width: 180px;">
                        <a href="#" onclick="banLogin('${row.account}','${row.banExpireTime}')">禁止/解封</a>
                        <a href="#" onclick="whiteLogin('${row.account}')">白名单</a>
                        <a href="#" onclick="gmLevel('${row.account}',${row.gmLevel})">GM</a>
                        <a href="#" onclick="kick('${row.account}')">踢下线</a>
                    </td>
                    <td>${row.account}</td>
                    <td style="width: 60px;">${row.gmLevel}</td>
                    <td style="width: 60px;">${row.white}</td>
                    <td>${row.banExpireTime}</td>
                    <td>${row.platform}</td>
                    <td>${row.createTime}</td>
                    <td style="width: 60px;">${row.loginCount}</td>
                    <td>${row.lastLoginTime}</td>
                </tr>
            `;
            return tr;
        }

        function alertShow(self, title) {
            let content = $(self).text();
            content = formatJsonWithNewlines(content);
            console.log(typeof content, content);
            new wxd.message.Alert(`<pre>${content}</pre>`, title).show();
        }

        $(() => {
            wxd.loading();
            pageView = new PageView("/admin/userData/queryList", search, createRow);
            search();
        });

        let whereJsonArray = [];

        function addWhere() {
            let whereJson = {};
            whereJson["where"] = $("#where").val();
            whereJson["and"] = $("#and").val();
            whereJson["whereValue"] = $("#whereValue").val();
            whereJsonArray[whereJsonArray.length] = whereJson;
            $("#labWhere").text(JSON.stringify(whereJsonArray));
            $("#whereValue").val("")
            $("#and").val("=");
        }

        function clearWhere() {
            whereJsonArray = [];
            $("#labWhere").text("");
        }

        function whiteLogin(account) {
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("account", account);
            new wxd.netty.PostRequest("/admin/userData/whiteLogin", urlQuery.toString(), (data) => {
                wxd.message.notice(data.msg);
                if (data.code === 1) {
                    search();
                }
            }).send();
        }

        function kick(account) {
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("account", account);
            new wxd.netty.PostRequest("/admin/userData/kick", urlQuery.toString(), (data) => {
                wxd.message.notice(data.msg);
                if (data.code === 1) {
                    search();
                }
            }).send();
        }

        function banLogin(account, banTime) {
            // language=HTML
            let html = `
                <ul>
                    <li><label>账号: </label><span id="labAccount">${account}</span></li>
                    <li><label>时间: </label><input id="banTime" type="datetime-local" value="${banTime}"></li>
                </ul>
            `;
            let alertBox = new wxd.message.Alert(html, "禁止登录设置");
            alertBox.okShow = "确定";
            alertBox.okCallback = () => {
                let urlQuery = new wxd.Map().loadSearch();
                urlQuery.put("account", $("#labAccount").text());
                urlQuery.put("banTime", $("#banTime").val());
                return new wxd.netty.PostRequest(
                    "/admin/userData/banLogin",
                    urlQuery.toString(),
                    (data) => {
                        wxd.message.notice(data.msg);
                        if (data.code === 1) {
                            search();
                            return true;
                        } else {
                            return false;
                        }
                    }).async(false)
                    .send();
            };
            alertBox.show();
        }

        function gmLevel(account, gmLevel) {

            // language=HTML
            let html = `
                <ul>
                    <li><label>账号: </label><label id="labAccount">${account}</label></li>
                    <li><label>GM等级: </label><input id="gmLevel" type="number" value="${gmLevel}"></li>
                </ul>
            `;
            let alertBox = new wxd.message.Alert(html, "新增区服");
            alertBox.okShow = "确定";
            alertBox.okCallback = () => {
                let formData = {
                    account: $("#labAccount").text(),
                    gmLevel: $("#gmLevel").val(),
                }
                return new wxd.netty.PostRequest(
                    "/admin/userData/gmLevel", formData,
                    (data) => {
                        wxd.message.notice(data.msg);
                        if (data.code === 1) {
                            needHide = true;
                            search();
                        }
                    }).async(false).send();
            };
            alertBox.show();
        }

    </script>
</head>
<body>
<div class="root box">
    <div class="root_box_top btn_box" style="padding-left: 20px; padding-top: 8px; text-align: left;vertical-align: center;">
        <label for="minTime">开始日期: </label><input id="minTime" type="datetime-local"/>
        <label for="maxTime">结束日期: </label><input id="maxTime" type="datetime-local"/>
        <br>
        <label for="where">查询条件:</label>
        <select id="where">
            <option value="account">账号</option>
            <option value="white">白名单</option>
            <option value="平台">平台</option>
        </select>

        <select id="and" style="width: 60px;">
            <option value="=">=</option>
            <option value="<="><=</option>
            <option value="<"><</option>
            <option value=">=">>=</option>
            <option value=">">></option>
        </select>

        <input id="whereValue" type="text"/>
        <input type="button" onclick="addWhere();" value="添加"/>
        <input type="button" onclick="clearWhere();" value="清理"/>
        <br>
        <label for="labWhere">查询条件:</label><label id="labWhere"></label>
        <br>
        <label for="orderField">排序条件:</label>

        <select id="orderField">
            <option value="account">账号</option>
            <option value="white">白名单</option>
            <option value="平台">平台</option>
        </select>

        <select id="orderOption" style="width: 60px;">
            <option value="DESC">降序</option>
            <option value="ASC">升序</option>
        </select>

        <input type="button" onclick="addOrder();" value="添加"/>
        <input type="button" onclick="clearOrder();" value="清理"/>
        <br>
        <label for="labOrderBy">排序条件:</label><label id="labOrderBy"></label>
        <br>
        <br>
        <button onclick="search();">查询</button>
    </div>
    <div class="root_box_center tableDom" style="margin: 10px; padding-right: 10px;border-radius: 0; overflow-x: auto;">
        <table style="min-width: 1400px;">
            <thead>
            <tr>
                <th>编号</th>
                <th style="width: 180px;">操作</th>
                <th>账号</th>
                <th style="width: 60px;">GM等级</th>
                <th style="width: 60px;">白名单</th>
                <th>禁止登录</th>
                <th>平台</th>
                <th>注册时间</th>
                <th style="width: 60px;">登录次数</th>
                <th>最后登录时间</th>
            </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <div class="root_box_bottom">

    </div>
</div>
</body>
</html>